﻿/*	Reset css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

:focus {
  outline: 0;
}
body {
  line-height: 1;
  color: black;
  background: white;
}
ol, ul {
  list-style: none;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: "" "";
}

/*	=General style
    ------------------------- */
body {
  background: #383838  url(img/background.jpg) left -20px repeat-x;
  font: 62.5%/1.5em "Lucida Sans Unicode", "Lucida Grande", 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
  color: #333;
}

body { font-size: 12px; line-height: 16px; }

/*	Lucida fixes for windows */
strong, em {
    font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

h3 {
  font-size: 1.9em;
  line-height: 1.2em;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

a, a:visited {
  color: #B8CE83;
  text-decoration: underline;
}

a:hover, a:visited:hover {
  color: #6699CC;
  text-decoration: underline;
}

img.left {
  float: left;
  margin: 1.5em 1.5em 1.5em 0;
}

img.right {
  float: left;
  margin: 1.5em 0 1.5em 1.5em;
}

blockquote {
  border-left: 1px solid #AAAAAA;
  color: #999;
  font-family: Georgia,"Times New Roman",Times,serif;
  font-style: italic;
  margin: 0 30px 1.5em;
  padding: 0pt 0pt 0pt 10px;
}

/*  =Fancy-type
    ------------------------- */
/* Ornaments on first paragraph.
   Commented out by default. Use with care.
   p:before { content: "\2767"; padding-right: 0.4em; }
   p + p:before { content: ""; padding:0; } */

/* For great looking type, use this code instead of asdf: 
   <span class="alt">asdf</span>  
   Best used on prepositions and ampersands. */
  
.alt { 
  color: #666; 
  font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif; 
  font-style: italic;
  font-weight: normal;
}


/* For great looking quote marks in titles, replace "asdf" with:
   <span class="dquo">&#8220;</span>asdf&#8221;
   (That is, when the title starts with a quote mark). 
   (You may have to change this value depending on your font size). */  
   
.dquo { margin-left: -.5em; } 


/* Reduced size type with incremental leading
   (http://www.markboulton.co.uk/journal/comments/incremental_leading/)

   This could be used for side notes. For smaller type, you don't necessarily want to 
   follow the 1.5x vertical rhythm -- the line-height is too much. 
   
   Using this class, it reduces your font size and line-height so that for 
   every four lines of normal sized type, there is five lines of the sidenote. eg:

   New type size in em's:
     10px (wanted side note size) / 12px (existing base size) = 0.8333 (new type size in ems)

   New line-height value:
     12px x 1.5 = 18px (old line-height)
     18px x 4 = 72px 
     72px / 5 = 14.4px (new line height)
     14.4px / 10px = 1.44 (new line height in em's) */

p.incr, .incr p {
	font-size: 10px;
	line-height: 1.44em;  
	margin-bottom: 1.5em;
}


/* Surround uppercase words and abbreviations with this class.
   Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] */
   
.caps { 
  font-variant: small-caps; 
  letter-spacing: 1px; 
  text-transform: lowercase; 
  font-size:1.2em;
  line-height:1%;
  font-weight:bold;
  padding:0 2px;
}

/*	=Layout
    ------------------------- */

div#header {
  position: relative;
  height: 170px;
  width: 960px;
  margin: 0 auto;
}

div#wrapper {
  width: 100%;
  padding: 0;
}

div#wrapper .inside {
  width: 960px;
  margin:  0 auto;
}

div#content {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

div#main {
  float: left;
  width: 610px;
  margin: 0 15px;
  display: inline;
}

div#sub {
  float: right;
  width: 290px;
  margin: 0 10px;
  display: inline;
}

div#main-navigation {
  position: absolute;
  top: 128px;
  left: 16px;
  width: 100%;
  text-align: left;
}


/*	=Tools
    ------------------------- */

.clear {
  clear:both;
  height:1px;
  margin:0;
  padding:0;
  font-size: 15px;
  line-height: 1px;
}

.clearfix { display: inline-block; }   
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/*	=Common classes
    ------------------------- */
.accessibility {
  position: absolute;
  top: -999em;
  left: -999em;
}

.left {
  float: left;
  margin: 0 1em 1em 0;
}

.right {
  float: right;
  margin: 0 1em 1em 0;
}

.hide {
  display: none;
}

.text-center {
  text-align: center;
}

img {
  border: solid 1px #ccc;
}

img.right,
a.right {
  float: right;
  margin: 8px 0 8px 16px;
}

img.left,
a.left {
  float: left;
  margin: 8px 16px 8px 0px;
}

/*	=Errors & Confirm messages
	------------------------- */

.errors, .notices {
  padding: 5px;
  font-weight: bold;
}
	
.errors {
  border: solid 1px #fbc2c4;
  background: #fbe3e4;
  color: #d12f19;
}

.form_error {
  color: #d12f19;
  font-weight: bold;
}

.notices {
  border: solid 1px #C6D880;
  background: #E6EFC2;
  color: #529214;
}

/*  =Grid thanks to Blueprint
    ------------------------- */
/* A container should group all your columns. */
.container {
  width: 950px;
  margin: 16px auto 0 auto;
}

/* Use this class together with the .span-x classes
   to create any composition of columns in a layout. */
   
.column {
  float: left;
  margin-right: 10px;
}


/* The last column in a row needs this class. */
.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1   { width: 30px; }
.span-2   { width: 70px; }
.span-3   { width: 110px; }
.span-4   { width: 150px; }
.span-5   { width: 190px; }
.span-6   { width: 230px; }
.span-7   { width: 270px; }
.span-8   { width: 310px; }
.span-9   { width: 350px; }
.span-10  { width: 390px; }
.span-11  { width: 430px; }
.span-12  { width: 470px; }
.span-13  { width: 510px; }
.span-14  { width: 550px; }
.span-15  { width: 590px; }
.span-16  { width: 630px; }
.span-17  { width: 670px; }
.span-18  { width: 710px; }
.span-19  { width: 750px; }
.span-20  { width: 790px; }
.span-21  { width: 830px; }
.span-22  { width: 870px; }
.span-23  { width: 910px; }
.span-24  { width: 950px; margin: 0; }

/* Add these to a column to append empty cols. */
.append-1   { padding-right: 40px; }  
.append-2   { padding-right: 80px; } 
.append-3   { padding-right: 120px; } 
.append-4   { padding-right: 160px; } 
.append-5   { padding-right: 200px; } 
.append-6   { padding-right: 240px; } 
.append-7   { padding-right: 280px; } 
.append-8   { padding-right: 320px; } 
.append-9   { padding-right: 360px; } 
.append-10  { padding-right: 400px; } 
.append-11  { padding-right: 440px; } 
.append-12  { padding-right: 480px; } 
.append-13  { padding-right: 520px; } 
.append-14  { padding-right: 560px; } 
.append-15  { padding-right: 600px; } 
.append-16  { padding-right: 640px; } 
.append-17  { padding-right: 680px; } 
.append-18  { padding-right: 720px; } 
.append-19  { padding-right: 760px; } 
.append-20  { padding-right: 800px; } 
.append-21  { padding-right: 840px; } 
.append-22  { padding-right: 880px; } 
.append-23  { padding-right: 920px; } 

/* Add these to a column to prepend empty cols. */
.prepend-1   { padding-left: 40px; }  
.prepend-2   { padding-left: 80px; } 
.prepend-3   { padding-left: 120px; } 
.prepend-4   { padding-left: 160px; } 
.prepend-5   { padding-left: 200px; } 
.prepend-6   { padding-left: 240px; } 
.prepend-7   { padding-left: 280px; } 
.prepend-8   { padding-left: 320px; } 
.prepend-9   { padding-left: 360px; } 
.prepend-10  { padding-left: 400px; } 
.prepend-11  { padding-left: 440px; } 
.prepend-12  { padding-left: 480px; } 
.prepend-13  { padding-left: 520px; } 
.prepend-14  { padding-left: 560px; } 
.prepend-15  { padding-left: 600px; } 
.prepend-16  { padding-left: 640px; } 
.prepend-17  { padding-left: 680px; } 
.prepend-18  { padding-left: 720px; } 
.prepend-19  { padding-left: 760px; } 
.prepend-20  { padding-left: 800px; } 
.prepend-21  { padding-left: 840px; } 
.prepend-22  { padding-left: 880px; } 
.prepend-23  { padding-left: 920px; } 

/* Border on right hand side of a column. */
.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #6F6F6F;
}

/* Border with more whitespace, spans one column. */
.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #6F6F6F;
}

/*  =Form
    ------------------------- */
form p {
  margin-bottom: 0.8em;
}
    
label {
  display: block;
  float: left;
  width: 100%;
  color:#AEC4C4;
  margin-bottom: 0.2em;
}

label .required {
  padding-left: 0.4em;
}

.text, textarea {
  border: solid 1px #AEC4C4;
  padding: 2px;
  width: 400px;
  background: #FFFFFF;
}

textarea {
  width: 400px;
}

/*  =Buttons
  --------------------------- */
a.button, button {
  display:block;
  float:left;
  margin:0 0.583em 0.667em 0;
  padding:5px 10px 6px 7px;   /* Links */
  
  border:0.1em solid #dedede;
  border-top:0.1em solid #eee;
  border-left:0.1em solid #eee;

  background-color:#f5f5f5;
  font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  font-size:100%;
  line-height:130%;
  text-decoration:none;
  font-weight:bold;
  color:#565656;
  cursor:pointer;
}
button {
  width:auto;
  overflow:visible;
  padding:4px 10px 3px 7px;   /* IE6 */
}
button[type] {
  padding:5px 10px 5px 7px;   /* Firefox */
  line-height:17px;           /* Safari */
}
*:first-child+html button[type] {
  padding:4px 10px 3px 7px;   /* IE7 */
}
button img, a.button img{
  margin:0 3px -3px 0 !important;
  padding:0;
  border:none;
  width:16px;
  height:16px;
}


/* Button colors
-------------------------------------------------------------- */

/* Standard */
button:hover, a.button:hover{
  background-color:#dff4ff;
  border:0.1em solid #c2e1ef;
  color:#336699;
}
a.button:active{
  background-color:#6299c5;
  border:1px solid #6299c5;
  color:#fff;
}

/* Positive */
.positive {
  color:#529214;
}
a.positive:hover, button.positive:hover {
  background-color:#E6EFC2;
  border:0.1em solid #C6D880;
  color:#529214;
}
a.positive:active {
  background-color:#529214;
  border:0.1em solid #529214;
  color:#fff;
}

/* Negative */
.negative {
  color:#d12f19;
}
a.negative:hover, button.negative:hover {
  background:#fbe3e4;
  border:0.1em solid #fbc2c4;
}
a.negative:active {
  background-color:#d12f19;
  border:0.1em solid #d12f19;
  color:#fff;
}


/*	=Header
    ------------------------- */
#header #branding {
  position: relative;
  top: 40px;
  left: 10px;
}

#header #branding a {
  display: block;
  background: transparent url(img/hacride.gif) left top no-repeat;
  width: 401px;
  height: 56px;
  text-indent: -9900em;
  overflow: hidden;
}

#lang-options {
  position: absolute;
  right: 10px;
  top: 5px;
}

#lang-options li { display: inline; }

#lang-options li .flag {
  display: block;
  float: left;
  width: 24px;
  height: 24px;
  margin-left: 5px;
  text-indent: -9900em;
  background-position: left top;
  background-repeat: no-repeat;
  background-color: transparent;
}

#lang-options li .french {  background-image: url(img/fr.png); }
#lang-options li .english {  background-image: url(img/uk.png); }
  

/*	=Content
    ------------------------- */
div#wrapper {
  color: #fff;
  font-size: 1em;
}

div#content {
  padding: 20px 0;
}

div#main h3, div#main h3 a{
  color: #E45A49; 
  text-decoration: none;
}

div#main h3 a:hover {
  color:  #E45A49; 
  text-decoration: underline;
}

div#main h3 {
  margin-bottom: 16px;
}

div#main strong { color: #B8CE83; }

/*  =Post
    ------------------------- */
.post {
  margin-bottom: 32px;
}

#posts .post .entry-title { margin-bottom: 0; }

.post .entry-informations {
  margin-bottom: 16px;
  color: #ccc;
  font-size: 0.9em;
}

.post .entry-content {
  margin-bottom: 16px;
}

.post .entry-content p {
  margin-bottom: 1.5em;
  line-height: 1.5em;
}

.post .tags {
  margin-right: 1em;
}

.post .entry-excerpt {
  margin-bottom: 0.8em;
}

.post .comment-result {
  padding-left: 18px;
  margin-right: 1em;
  background: transparent url(img/comment.gif) left 0.2em no-repeat;
}

.tag-title {
  font-size: 1.1em;
  margin-bottom: 1em;
}

.post .tag {
  padding-left: 18px;
  background: transparent url(img/tag.gif) left 0.2em no-repeat;
}

.post .entry-permalink {
  padding-left: 18px;
  background: transparent url(img/link.gif) left 0.2em no-repeat;
}

/*  =Comment
    ------------------------- */
#comments h3 {
  font-size: 1.4em;
  margin-bottom: 0.6em;
}

.comment h4 {
  padding: 5px;
  background: #2F3E3E;
  color: #ccc;
}

.comment h4 span {
  color: #CAE001;
}

.comment h4 .comment-author {
  padding-right: 0.4em;
}

.comment h4 .comment-date {
  padding-left: 0.4em;
}

.comment p {
  padding: 5px 5px 15px 5px;
}

.comment .comment-permalink {
  display: block;
  float: right;
  margin-right: 0.6em;
}

.comment .comment-permalink a {
  display: block;
  width: 16px;
  height: 16px;
  background: transparent url(img/link.gif) left top no-repeat;
  text-indent: -9900em;
}

/*  =Pictures media
    ------------------------- */
.picture {
  float: left;
  margin: 8px;
  width: 100px;
  height: 100px;
  padding: 4px;
}

/*  =Tour
    ------------------------- */
#shows .dtstart { display: none; }

#shows .shows-list {
  padding-left:115px;
  width:350px;
}

#shows ul li {
  clear:both;
  float:left;
  list-style-type:none !important;
  margin-bottom:8px !important;
  margin-left:-115px !important;
  padding-left:115px;
  width:350px;
}

#shows ul li dl {
  color:#777777;
  float:left;
  font-size:11px;
  margin:0pt 0pt 0pt -115px !important;
  padding:0pt;
  position:relative;
  text-align:right;
  width:95px;
}

#shows ul li dl dd { margin: 0; }

#shows h4 { font-weight: bold; letter-spacing: 0.1em; color: #aaa; }

#shows .show-place { font-style: italic; }

/*  =Sidebar
    ------------------------- */
#sub #archives ul {
  margin: 1em 0;
  border-bottom:1px dotted #aaa;
}

#sub #archives ul li {
  border-top:1px dotted #aaa;
  margin: 0;
}

#sub #archives ul li a {
  display: block;
  padding: 5px;
  line-height: 16px;
  color: #aaa;
  text-decoration: none;
  height: auto !important;
  height: 16px;
}

#sub #archives ul li a:hover {
  background: #3F3F3F;
  color: #6699CC;
}

/*  =SubBlock
    ------------------------- */
#sub .sub-block {
  margin-bottom: 32px;
}

#sub .sub-block p {
  line-height: 16px;
  margin-bottom: 16px;
}

#sub .sub-block p.tiny-margin {
  margin-bottom: 8px;
}

#sub .sub-block dl p {
  margin: 0;
}

#sub strong {
  color:#B8CE83;
}

#sub .sub-block h3 {
  width: 100%;
  height: 55px;
  line-height: 55px;
  margin-bottom: 16px;
  text-indent: -9900em;
  background-color: transparent;
  background-position: left top;
  background-repeat: no-repeat;
}

#sub #album h3 { background-image: url(img/block-album.gif); }
#sub #upcoming h3 { background-image: url(img/block-shows.gif); }
#sub #video h3 { background-image: url(img/block-video.gif); }
#sub #archives h3 { background-image: url(img/block-archives.gif); }

#sub .sub-block .sub-block-body {
  margin: 0 30px 0 20px;
}

#sub .sub-block ul li {
  margin-bottom: 8px;
}

#sub .sub-block ul li dt {
  color: #999;
  font-weight: bold;
}

#sub .sub-block ul li dd {
  color: #fff;
}

/*  =Sub classes
    ------------------------- */
.amoeba { border: solid 1px #fff; }

/*  =Navigation
    ------------------------- */
#main-navigation li {
  display: inline;
}

#main-navigation li a {
  float: left;
  display: block;
  height: 36px;
  line-height: 36px;
  text-indent: -9900em;
  background-color: transparent;
  background-position: left top;
  background-repeat: no-repeat;
}
#main-navigation li.news a { width: 96px; background-image: url(img/news.gif); }
#main-navigation li.bio a { width: 96px; background-image: url(img/bio.gif); }
#main-navigation li.medias a { width: 158px; background-image: url(img/medias.gif); }
#main-navigation li.tour a { width: 116px; background-image: url(img/tour.gif); }
#main-navigation li.merch a { width: 143px; background-image: url(img/merch.gif); }

/*  =Footer
    ------------------------- */
#footer {
  width: 100%;
  color: #fff;
  min-height: 150px;
  
}

#footer .column {
  min-height: 220px;
  height: auto !important;
  height: 220px;
}

#footer p {
  line-height: 16px;
  margin-bottom: 16px;
}

#footer p .feed {
  padding-left: 16px;
  background: transparent url(img/tiny-feed.gif) left 2px no-repeat;
}

#footer #endorsements {
  background: transparent url(img/endorsements.jpg) left -10px no-repeat;
  width: 277px;
  height: 209px;
  position: relative;
}

#footer #endorsements li a {
  display: block;
  text-indent: -9900em;
  position: absolute;
}

#footer #endorsements li a#aquarian { width: 136px; height: 36px; top: 10px; left: 0px; }
#footer #endorsements li a#jackson { width: 138px; height: 48px; top: 5px; left: 136px; }
#footer #endorsements li a#meinl { width: 82px; height: 58px; top: 48px; left: 25px; }
#footer #endorsements li a#spaun { width: 106px; height: 50px; top: 58px; left: 154px; }
#footer #endorsements li a#nos { width: 80px; height: 50px; top: 110px; left: 25px; }
#footer #endorsements li a#elixirs { width: 107px; height: 49px; top: 110px; left: 155px; }
#footer #endorsements li a#clain { width: 85px; height: 49px; top: 160px; left: 25px; }
#footer #endorsements li a#mtd { width: 79px; height: 49px; top: 160px; left: 170px; }